<div style="width: 100%; height: 100%; overflow: auto; text-overflow: ellipsis;" tabindex="-1">
    @if (!!track_line) {
        <div class="p-d-flex p-flex-column p-mx-2" style="font-size: 12px;">
            <div class="p-mt-1" style="font-weight: bolder;">
                {{track_line.label}}
            </div>
            @if (track_line.has_timestamp) {
                <div class="p-mt-1">
                    起始时间：{{track_line.time_begin}}
                </div>
                <div class="p-mt-1">
                    结束时间：{{track_line.time_end}}
                </div>
                <div class="p-mt-1">
                    时长：{{track_line.duration}}
                </div>
            }
            <div class="p-mt-1">
                距离：{{track_line.distance}}公里
            </div>
            <div class="p-mt-1">
                水平距离：{{track_line.distance_horizon}}公里
            </div>
            <div class="p-mt-1">
                累计上升：{{track_line.climb}}米
            </div>
            <div class="p-mt-1">
                累计下降：{{track_line.descent}}米
            </div>
            <div class="p-mt-1">
                海拔范围：{{track_line.alt_min.toFixed(0)}}米 ~ {{track_line.alt_max.toFixed(0)}}米
            </div>
            <div class="p-mt-1">
                轨迹点数：{{track_line.point_num}}
            </div>

            @if (!is_editing() && !!current_point) {
                <div class="p-mt-3" style="font-weight: bolder;">
                    当前轨迹点： {{current_point_index}}
                </div>
                @if (track_line.has_timestamp) {
                    <div class="p-mt-1">
                        时间：{{current_point_time}}
                    </div>
                }
                <div class="p-mt-1">
                    东经：{{current_point[0].toFixed(8)}}
                </div>
                <div class="p-mt-1">
                    北纬：{{current_point[1].toFixed(8)}}
                </div>
                <div class="p-mt-1">
                    海拔：{{current_point[2].toFixed(0)}}米
                </div>
            }

            @if (is_editing()) {
                @if (track_line.sel_end_idx >= track_line.sel_start_idx) {
                    <div class="p-mt-3" style="font-weight: bolder;">
                        当前轨迹段： {{track_line.sel_start_idx}} — {{track_line.sel_end_idx}}
                    </div>
                    @if (track_line.has_timestamp) {
                        <div class="p-mt-1">
                            起始时间：{{track_line.sel_time_begin}}
                        </div>
                        <div class="p-mt-1">
                            结束时间：{{track_line.sel_time_end}}
                        </div>
                        <div class="p-mt-1">
                            时长：{{track_line.sel_duration}}
                        </div>
                    }
                    <div class="p-mt-1">
                        距离：{{track_line.sel_distance}}公里
                    </div>
                    <div class="p-mt-1">
                        水平距离：{{track_line.sel_distance_horizon}}公里
                    </div>
                    <div class="p-mt-1">
                        累计上升：{{track_line.sel_climb}}米
                    </div>
                    <div class="p-mt-1">
                        累计下降：{{track_line.sel_descent}}米
                    </div>
                    <div class="p-mt-1">
                        海拔范围：{{track_line.sel_alt_min.toFixed(0)}}米 ~ {{track_line.sel_alt_max.toFixed(0)}}米
                    </div>
                    <div class="p-mt-1">
                        轨迹点数：{{track_line.sel_point_num}}
                    </div>                    
                }


                @if (track_line.selected_point >= 0) {
                    <div class="p-mt-3" style="font-weight: bolder;">
                        当前轨迹点： {{track_line.selected_point}}
                    </div>
                    @if (track_line.has_timestamp) {
                        <div class="p-mt-1">
                            时间：{{track_line.selected_point_time}}
                        </div>
                    }
                    <div class="p-mt-1">
                        东经：{{track_line.points[track_line.selected_point][0].toFixed(8)}}
                    </div>
                    <div class="p-mt-1">
                        北纬：{{track_line.points[track_line.selected_point][1].toFixed(8)}}
                    </div>
                    <div class="p-mt-1">
                        海拔：{{track_line.points[track_line.selected_point][2].toFixed(0)}}米
                    </div>
                }
            }
        </div>
    }

    @if (!!way_point) {
        <div class="p-d-flex p-flex-column p-mx-2" style="font-size: 12px;">
            <div class="p-mt-2 p-mb-2" style="font-weight: bolder;">
                {{way_point.label}}
            </div>

            @if (way_point.timestamp) {
                <div class="p-mt-1">
                    时间：{{current_point_time}}
                 </div>
            }
            <div class="p-mt-1">
                东经：{{way_point.lon.toFixed(8)}}
            </div>
            <div class="p-mt-1">
                北纬：{{way_point.lat.toFixed(8)}}
            </div>
            <div class="p-mt-1">
                海拔：{{way_point.alt.toFixed(0)}}米
            </div>
        </div>
    }

    @if (!!photo) {
        <div class="p-d-flex p-flex-column p-mx-2" style="font-size: 12px;">
            <div class="p-mt-2 p-mb-2" style="font-weight: bolder;">
                {{photo.label}}
            </div>

            @if (photo.timestamp) {
                <div class="p-mt-1">
                    时间：{{current_point_time}}
                 </div>
            }
            <div class="p-mt-1">
                东经：{{photo.lon.toFixed(8)}}
            </div>
            <div class="p-mt-1">
                北纬：{{photo.lat.toFixed(8)}}
            </div>
            @if (photo.alt) {
                <div class="p-mt-1">
                    海拔：{{photo.alt.toFixed(0)}}米
                </div>
            }
            @if (photo.direction) {
                <div class="p-mt-1">
                    拍摄角度：{{photo.direction.toFixed(2)}}
                </div>                
            }

        </div>
    }

    @if (!track_line && !way_point && !photo) {
        <div class="p-d-flex p-flex-column p-mt-3 p-ml-3"  style="font-size: 12px;">
            <div style="font-weight: bolder;">
                SpiderMap户外轨迹编辑器
            </div>
            <div class="p-mt-3">
                v3.0.6
            </div>
            <div class="p-mt-3">
                版权所有 © 2017-2025
            </div>
        </div>
    }

</div>